<template>
  <!-- 顶部标题 -->
  <view class="Login">
    <view class="Login1">
      <view class="Login1-2">
        <image class="logo" src="/src/static/log/LoginLogo.png" @click="tiaozuan"></image>
      </view>
      <view class="Login1-3">
        <text class="Login1-3-text">XX集团MES</text>
        <text class="Login1-3-subtext">实时生产监控系统</text>
      </view>
      <view class="Login1-4">
        <view class="Login1-4-0">
          <view class="Login1-4-1">
            <image
              src="/src/static/icon/use.png"
              style="width: 40px; height: 40px"
            ></image>
            <uni-easyinput
              v-model="use"
              class="custom-input"
              placeholder="工号"
              primaryColor="#5993DD"
              :inputBorder="false"
              :style="{
                'background-color': '#FFFFFF',
                'border-radius': '8px',
                'border': '1px solid #E5E5E5',
                'height': '48px',
                'font-size': '16px',
                'width': '265px'
              }"
            ></uni-easyinput>
          </view>
          <view class="Login1-4-1">
            <image
              src="/src/static/icon/pad.png"
              style="width: 40px; height: 40px"
            ></image>
            <uni-easyinput
              type="password"
              v-model="pad"
              placeholder="密码"
              primaryColor="#5993DD"
              :clearable="false"
              :inputBorder="false"
              :style="{
                'background-color': '#FFFFFF',
                'border-radius': '8px',
                'border': '1px solid #E5E5E5',
                'height': '48px',
                'font-size': '16px',
                'width': '265px'
              }"
            ></uni-easyinput>
          </view>
        </view>
      </view>
      <view class="Login1-5">
        <checkbox-group class="checkbox-group">
          <label class="checkbox-label">
            <checkbox value="autoLogin" color="#5993DD" />
            <text>自动登录（仅厂区设备）</text>
          </label>
          <label class="checkbox-label">
            <checkbox value="avoidTouch" color="#5993DD" checked/>
            <text>避免免触措</text>
          </label>
        </checkbox-group>
      </view>
      <view class="Login1-6">
        <button class="Login1-6-button">登录系统</button>
      </view>
      <view class="Login1-7">
        <view class="Login1-7-1">
          <image
            src="/src/static/icon/system2.png"
            style="width: 17px; height: 17px; margin-right: 5px"
          ></image>
          <view class="Login1-7-text1"> 忘记密码</view>
        </view>
        <view class="Login1-7-3">|</view>
        <view class="Login1-7-2">
          <image
            src="/src/static/icon/system3.png"
            style="width: 30px; height: 30px"
          ></image>
          <view class="Login1-7-text2">注册账号</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
let use = ref<string>(""); // 定义一个响应式变量 value，用于绑定输入框的
let pad = ref<string>(""); // 定义一个响应式变量 pad，用于绑定输入框的密码

//用于跳转到另一个登录页
const tiaozuan=()=>{
  // uni.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
  uni.navigateTo({
    url: '/pages/Login/Login5' 
  });
}
</script>

<style scoped>
.Login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  min-height: 100vh;
  background-color: green;
  background-image: url("/src/static/log/Loginbg3.png");
   background-size: 100% 100%; 
}
.Login1 {
  background-color: #f8f3f1;
  width: 326px;
  height: 500px;
  margin-top: 77px;
  border-radius: 20px;
   opacity: 0.9; 
}

.Login1-2 {
  height: 125px;
  border-radius: 20px;
}
.logo {
  margin: 3vh 5vh;
  width: 260px;
  height: 75px;
  border-radius: 20px;
}
.Login1-3 {
  display: flex;
  width: 100%;
  height: 75px;
  align-items: center;
  justify-content: center;
}
.Login1-3-text {
  font-size: 25px;
  color: #536d6c;
  transform: scaleX(1.2);
  letter-spacing: 2px;
}
.Login1-4 {
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
}
.Login1-4-0 {
  width: 265px;
  height: 125px;
}
.Login1-4-1 {
  width: 265px;
  height: 64px;
  display: flex;
  align-items: center;
}


.Login1-5 {
  height: 50px;
  padding-top: 15px;
  padding-left: 25px;
}

.Login1-6 {
  width: 100%;
  height: 10%;
}
.Login1-6-button {
  width: 265px;
  height: 45px;
  background-color: #5993dd;
  border-radius: 20px;
  color: #fff;
}
.Login1-7 {
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.Login1-7-1 {
  width: 155px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.Login1-7-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 50px;
}
.Login1-7-2 {
  width: 155px;
  height: 50px;
  background-color: greern;
  display: flex;
  align-items: center;
}
.Login1-7-text1 {
  margin-right: 11px;
}

.Login {
  background-color: #F5F7FA;
  background-image: none;
  align-items: flex-start;
  padding-top: 80px;
}
.Login1 {
  background-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  opacity: 1;
  padding: 30px 20px;
  height: auto;
  min-height: 450px;
}
.Login1-3 {
  flex-direction: column;
  height: auto;
  margin-bottom: 30px;
}
.Login1-3-text {
  font-size: 24px;
  color: #1D2129;
  transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.Login1-3-subtext {
  font-size: 14px;
  color: #4E5969;
  margin-top: 4px;
}
.Login1-4-1 {
  margin-bottom: 15px;
}
.checkbox-group {
  display: flex;
  justify-content: space-between;
  width: 265px;
  margin: 0 auto;
}
.checkbox-label {
  display: flex;
  align-items: center;
}
.checkbox-label text {
  font-size: 14px;
  color: #4E5969;
  margin-left: 5px;
}
.Login1-6-button {
  background-color: #5993DD;
  width: 265px;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}
.Login1-8 {
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.Login1-8-text {
  font-size: 12px;
  color: #86909C;
}
.Login1-7-text2 {
  margin-right: 11px;
}
</style>
